﻿<template>
      <!--send box s-->
  <div class="reginster_wrap" ref="git_contain">
    <div class="finish_msg_title" style="background-color:#009a44;color:#fff;">
      应聘派信员
    </div>
    <input class="input_base" placeholder="社团/学生会" ref="name" style="border:1px solid #9f5c2f"/>
    <div class="input_base" placeholder="有无兼职经验" v-on:click="sheetVisible_change"  v-on:focus="focus($event.target)" style="border:1px solid #9f5c2f">
      {{male}}
    </div>
    <!--<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>-->
    <!--<div class="input_base" placeholder="学生证" v-on:click="popupVisible_change">

    </-->
     <input class="input_base" placeholder="学生证" ref="stu" style="border:1px solid #9f5c2f"/>
    <!-- 性别 -->
    <mt-actionsheet :actions="actions"
                    v-model="sheetVisible" ref="el">
    </mt-actionsheet>
   <!-- 星座 -->
    <mt-popup v-model="popupVisible"
              position="bottom" ref="el2" v-on:scroll="scroll_limit">
      <div class="close_btn" v-on:click="close_btn_c">确定</div>
      <mt-picker :slots="slots" @change="onValuesChange" v-model="picker_v" class="thom_picker">

      </mt-picker>
    </mt-popup>
    <p class="input_list" style="color:#9f5c2f;">
      点击提交表示同意《用户协议》
    </p>
    <div class="next_step" v-on:click="next">提交</div>
  </div>
  <!--<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>-->
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import { Toast, Actionsheet, Picker, Indicator, MessageBox} from 'mint-ui';
  import qs from "qs";
  import limit_scroll from "../../../../static/js/limit_scroll.js"
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      picker_value:"双子座",
      disp_value:"",
      actions: [

      ],
      sheetVisible: false,
      male: "有无兼职经验",
      xz:"星座",
      slots: [
        {
          flex: 1,
          values: ['白羊座',
            '金牛座',
            '双子座',
            '巨蟹座',
            '狮子座',
            '处女座',
            '天平座',
            '天蝎座',
            '射手座',
            '摩羯座',
            '天平座',
            '双鱼座'
          ],
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }
      ],
      popupVisible: false,
      show_b_img_data:""
    }
  },
  mounted: function () {
    this.$emit('change_bg');
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (from.path == "/Wrap_login/Finisth_msg_2") {
        this.$emit('change_bg_false');
        next(true)
    }
  },
  mounted() {
    //limit_scroll(this.$refs.el, this.$refs.git_contain);
    //limit_scroll(this.$refs.el2, this.$refs.git_contain);
    this.actions = [{
      name: '有',
      method: this.takePhoto
    }, {
      name: '没有',
      method: this.openAlbum
    }];
    this.actions2 = [{
      name: '确定'
    }, {
      name: '返回上一步',
      method: this.goBack
      }];
    this.picker_value = "双子座";
  },
  methods: {
    ...mapMutations(["Change_user"]),
    ...mapGetters(["get_Send_man_msg"]),
    close_btn_c: function () {
      this.popupVisible = false;
      this.xz = this.picker_value
    },
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      this.picker_value = values[0];
    },
    popupVisible_change() {
      this.popupVisible = "true"
    },
    takePhoto: function () {
      this.male = "有";
    },
    openAlbum: function () {
      this.male = "没有";
    },
    //页面跳转
    sheetVisible_change:function() {
      this.sheetVisible = !this.sheetVisible
    },
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    login:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goto_register:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Login/Register",router:this.$router
        });
    },
    next: function () {
      let name = this.$refs.name.value;
      let stu = this.$refs.stu.value;
      if (this.$refs.name.value == "") {
        Toast("请输入社团/学生会名称");
        return false;
      } else if (this.male == "有无兼职经验") {
        Toast("请选择兼职经验")
        return false;
      } else if (stu == "" || stu == undefined || stu == null) {
        Toast("请输入学生证")
        return false;
      }
      //设置user 提交
      //this.Change_user({
      //  "sex": this.male,
      //  "constellation": this.xz,
      //  "penName": name
      //})

      //有没有工作经验
      let experience =  false;
      if (this.male == "有") {
        experience = true
      }

      let post_obj = this.get_Send_man_msg()
      let _this_obj = {
        studentCard: stu,
        experience: experience,
        college: name
      }
      Object.assign(_this_obj, post_obj);

      Indicator.open();
      this.$http.post('/api/user/dispatchclerk/applyFor',
        qs.stringify(_this_obj)
       )
      .catch((thrown) => {
          this.$emit('hide_load');
          Indicator.close();
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close();
          MessageBox.confirm('已提交申请，请等待回复', '提示');
          this.$store.dispatch("thom_redirect",
            {
              name: "/Wrap_login/Finish_msg", router: this.$router
            });
      })


    }
  }
}
</script>
<style scoped>
  /*message_box s*/
  @component-namespace page {
    @component msgbox {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);

        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
/*message_bxo e*/
  .thom_picker{
    position:relative;
  }
  .close_btn{
    top:0;
    left:0;
    z-index:100;
    font-size:0.8rem;
    position:absolute;
    padding:0.4rem;
    letter-spacing:2px;
    color:#fff;
    background-color:#9f5c2f;
  }
  @component-namespace page {
    @component actionsheet {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);

        button:first-child {
          margin-bottom: 20px;
        }
      }
    }
  }
  /*pop s*/
  .mint-popup-bottom{
    width:100%;
  }
  .picker-item.picker-selected{
    text-align:center;
  }
  /*pop e*/
  /*finish_msg s*/
  .login_wrap .login_header_left {
    margin: 1rem 0 0 6%;
  }
  .login_wrap .login_header_right {
    margin: 0.8rem 6% 0 0;
  }
  .next_step {
    width: 86%;
    height: 1.75rem;
    line-height: 1.75rem;
    background-color: #9f5c2f;
    color: #fff;
    margin: 0 auto;
    border-radius: 2vw;
    font-size: 0.7rem;
  }
  .input_list {
    margin-bottom: 0.8rem;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
  }
  .input_base::-webkit-input-placeholder {
    color: #9f5c2f;
    text-align: center;
    font-weight: 600;
    padding-right: 6%;
    padding-left: 6%;
  }

  .input_base:-moz-placeholder {
    text-align: center;
    color: #9f5c2f;
    padding-right: 6%;
    font-weight: 600;
    padding-left: 6%;
  }

  .input_base:-ms-input-placeholder {
    text-align: center;
    /* IE10+ */
    color: #9f5c2f;
    font-weight: 600;
    padding-right: 6%;
    padding-left: 6%;
  }
  .input_base {
    padding:0;
    text-align:center;
    font-size:0.7rem;
    padding-left:6%;
    border: 0;
    outline: none;
    display: block;
    width: 74%;
    padding-right:6%;
    height: 1.7rem;
    line-height: 1.75rem;
    background-color: #fff;
    border-radius: 2vw;
    color:#9f5c2f;
    height:2rem;
    line-height:2rem;
    font-weight:600;
    margin: 0 auto 0.5rem;
  }
  .finish_msg_title {
    width: 37%;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    color: #9f5a30;
    font-size: 0.7rem;
    background-color: #fff;
    margin: 0.6rem auto 1.1rem;
    border-radius: 2vw;
    letter-spacing: 1px;
    font-weight: 700;
  }
 /*finish_msg e*/
  .reginster_wrap {
    width: 100%;
    height: 100%;
  }
.certain_btn_inner{
  border:2px solid #9f5c2f;
  width: 86%;
  height: 1.75rem;
  line-height: 1.75rem;
  color: #ffffff;
  background-color: #9f5c2f;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
}
.inner_main_input{
  padding-right:6%;
  width: 74%;
}
*::-webkit-input-placeholder {
  text-align: center;
}

*:-moz-placeholder {
  text-align: center;
}

*:-ms-input-placeholder {
  text-align: center;
}

/*bottom_btn*/
.bottom_btn{
  width: 8rem;
  transform:translateX(-50%) ;
  position: absolute;
  bottom: 1.85rem;
  left:50%;
}

.bottom_left_btn{
  float: left;
  width: 3.5rem;
  height: 1rem;
  line-height:1.8;
  text-align: center;
  color: #9f5c2f;
  font-size: 0.6rem;
  background-color: #ffffff;
  border-radius: 1.4vw;
  letter-spacing: 1px;
}
.mid_line{
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  float: left;
  width: 2px;
  background-color: #9f5c2f;
}
</style>

